<script lang="ts" setup>
import {ref} from 'vue'
import {useRoute} from "vue-router";

const route = useRoute()
const isCollapse = ref(true)

function avrq() {
  isCollapse.value = !isCollapse.value
}
</script>
<template>
  <div class="left-menu">
    <div class="left-header">
      <el-radio-group v-model="isCollapse" @click="avrq">
        <img alt="" class="logo" src="../assets/imgs/logo.png"/>
      </el-radio-group>
      <span>外卖商家中心</span>
    </div>
    <el-menu
        :collapse="isCollapse"
        :default-active="route.path"
        background-color="#202f3f"
        class="el-menu-vertical-demo"
        text-color="#eee"
        unique-opened
    >
      <el-menu-item index="/home">
        <el-icon>
          <i class="iconfont icon-shouye-shouye"></i>
        </el-icon>
        <span>后台首页</span>
      </el-menu-item>
      <el-menu-item index="/order">
        <el-icon>
          <i class="iconfont icon-dingdan"></i>
        </el-icon>
        <span>订单管理</span>
      </el-menu-item>
      <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <i class="iconfont icon-shangpin"></i>
          </el-icon>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item index="/goods/goods-list">商品列表</el-menu-item>
        <el-menu-item index="/goods/goods-add">商品添加</el-menu-item>
        <el-menu-item index="/goods/goods-cate">商品分类</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/shop">
        <el-icon>
          <i class="iconfont icon-dianpu"></i>
        </el-icon>
        <span>店铺管理</span>
      </el-menu-item>
      <el-sub-menu index="5">
        <template #title>
          <el-icon>
            <i class="iconfont icon-205yonghu_yonghu6"></i>
          </el-icon>
          <span>帐号管理</span>
        </template>
        <el-menu-item index="/account/account-list">账号列表</el-menu-item>
        <el-menu-item index="/account/account-add">添加账号</el-menu-item>
        <el-menu-item index="/account/person">个人中心</el-menu-item>
        <el-menu-item index="/account/password-modify">修改密码</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>
          <el-icon>
            <i class="iconfont icon-bingtu"></i>
          </el-icon>
          <span>销售统计</span>
        </template>
        <el-menu-item index="/total/total-goods">商品统计</el-menu-item>
        <el-menu-item index="/total/total-order">订单统计</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<style lang="scss" scoped>
.left-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 100%;

  .logo {
    width: 50px;
    margin-right: 10px;
  }

  span {
    font-size: 20px;
    font-weight: 600;
    color: white;
  }
}

.el-menu-demo {
  border: none;

  i {
    margin-right: 5px;
  }
}

el-menu-item {
  background-color: #202f3f !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>